<template>
    <div class="box" >
       <div class="container">
          <div class="box-2">
             <div class="bottom-top">
                <van-row>
                   <van-col span="2">序</van-col>
                   <van-col span="5">访客姓名</van-col>
                   <van-col span="6">访客日期</van-col>
                   <van-col span="5">状态</van-col>
                   <van-col span="5">查看</van-col>
 
                </van-row>
             </div>
             <div class="bottom-content">
                <van-row v-for="(item,index) in tabledata" :key="index">
                   <van-col span="2">{{ item.id }}</van-col>
                   <van-col span="5">{{ item.name }}</van-col>
                   <van-col span="6">{{ item.time }}</van-col>
                   <van-col span="5"> {{ item.statu }}</van-col>
                   <van-col span="5">查看</van-col>
                </van-row>
             </div>
          </div>
       </div>
    </div>
 </template>
 
 <script setup>
 import { allGuestApi, adminTodayApi } from '@/api/adminAPi'
 import { useRouter } from 'vue-router';
 import adminStore from '@/store/admin'
 import { ref, onMounted, onBeforeMount } from 'vue'
 const myadminStore = adminStore()
 const router = useRouter();
 
 const total = ref(0)
 const tabledata = ref(['123',
    '156'])
 const spanRef = ref()
 let adminToday = ref([])
 
 onBeforeMount(async () => {
    myadminStore.setUserInfo(false)
    let ret = await allGuestApi()
    if (ret.code === 0) {
       total.value = ret.total
       tabledata.value= ret.data
    }
 })
 
 
 </script>
 <style scoped lang="scss">
 .box {
    padding-top: 10px;
 }
 
 .todayGuest {
    font-size: 15px;
    font-family: "微软雅黑";
    color: #3C3B3D;
    margin-left: 12px;
    font-weight: bold;
 }
 

 
 .container {
    width: 355px;
    margin: 0 auto;
 }
 
 .span-fen {
    padding: 5px;
    background-color: #F89AD8;
    border-radius: 5px;
    color: white;
 }
 
 .span-blue {
    padding: 5px;
    background-color: #6CB6FF;
    border-radius: 5px;
    color: white;
 }
 
 .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
 
    .box-2 {
       padding: 10px;
       flex: 1;
 
       .bottom-top {
          position: sticky;
          top: 0;
          background-color: #f7f3f3;
 
          div {
             height: 50px;
             display: flex;
             align-items: center;
             z-index: 1;
             opacity: 1;
 
             .van-icon {
                transform: scaleX(-1);
             }
 
             // span {
 
             //    width: 30px;
             //    font-size: 14px;
             //    // font-weight: 600;
             // }
          }
 
          .van-row {
             width: 335px;
             background-color: #6CB6FF;
             border-radius: 5px 5px 0 0;
             font-size: 14px;
             color: white;
             position: sticky;
             top: 60px;
             z-index: 3;
 
             :deep(.van-col) {
                display: flex;
                justify-content: center;
                align-items: center;
             }
          }
       }
 
       .bottom-content {
          .van-row {
             font-size: 14px;
             color: black;
             height: 50px;
             // font-weight: 500px;
 
             :deep(.van-col) {
                display: flex;
                justify-content: center;
                align-items: center;
             }
 
             &:nth-child(even) {
                background-color: #E9F4FF;
             }
          }
       }
    }
 
 }
 </style>
 